import React from 'react';
import routes from './routes';
import {getDetail} from './api';
import styles from './style.css';
import PropTypes from 'prop-types';
import Return from '../common/Return';
import {PERMISSION} from './constants';
import {injectIntl, language} from './intl';
import {ListTypeCL, hasPermissions} from './utils';
import TextInput from 'Shared/components/TextInput';
import WrappedSelect from '../common/WrappedSelect';
import {Spin, Card, Button, Form, Row, Col} from 'antd';
import LocalizeInputNumber from '../common/LocalizeInputNumber';
import {formatDateTime, conventEnumValueToString} from '../utils';
import {FORM_OPTIONS, FORM_ROW_OPTIONS, DATE_FORMAT} from '../constants';
import {vehicleOperactionsNature, vehicleProperty, vehicleStatus, productGroupType, LfetOrRight} from '../Enum';
const FormItem = Form.Item;
class NewPanel extends React.PureComponent {
    state = {
        data: {},
        loading: false,
        hasOperat: false,
        isValidate: false
    }
    componentDidMount() {
        if(this.props.id)
            this.getDetailInfo();
        this.ismounted = true;
    }
    componentWillUnmount() {
        this.ismounted = false;
        this.props.onUmount();
    }
    getDetailInfo = () => {
        this.setState(({loading: true}));
        getDetail(this.props.id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        data: res.data
                    });
                else
                    this.setState(({loading: false}));
            });
    }
    handleFilterChange = (value, name) => {
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            hasOperat: true
        });
    }
    onSubmit = () => {
        this.setState({loading: true});
        this.props.onSubmit(this.state.data).then(res => {
            if(res.success)
                this.props.successReturn();
            this.setState({loading: false});
        });
    };
    render() {
        const {data, validate, loading, hasOperat} = this.state;
        const {intl: {formatMessage}, initEnumData, permissions, onCancel} = this.props;
        const submitable = !hasPermissions(PERMISSION.update, permissions);
        const validateBrands = !data.brandId && validate ? 'error' : null;
        const validateVin = !data.vin && validate ? 'error' : null;
        const validateProductCode = !data.productCode && validate ? 'error' : null;
        const validateProductName = !data.productName && validate ? 'error' : null;
        const validateManufacturerName = !data.manufacturerName && validate ? 'error' : null;
        return (
            <div className="form-standard">
                <Spin spinning={loading}>
                    <Card title={formatMessage({
                        id: 'newPanel.column.common',
                        defaultMessage: '车辆档案信息'
                    })}>
                        <Form>
                            <Row>
                                {initEnumData.brands && initEnumData.brands.length > 1 &&
                                 <Col {...FORM_OPTIONS.col}>
                                     <FormItem label={formatMessage({
                                         id: 'newPanel.form.brandName',
                                         defaultMessage: '品牌'
                                     })} {...FORM_OPTIONS.item}
                                     helpShow validateStatus={validateBrands} required>
                                         {data.brandName}</FormItem>
                                 </Col>}
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.vin',
                                        defaultMessage: 'VIN'
                                    })} {...FORM_OPTIONS.item}
                                    helpShow validateStatus={validateVin} required>
                                        {data.vin}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.productCategoryCode',
                                        defaultMessage: '车型编号'
                                    })} {...FORM_OPTIONS.item}
                                    helpShow required>
                                        {data.productCategoryCode}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.productCategoryName',
                                        defaultMessage: '车型名称'
                                    })} {...FORM_OPTIONS.item}
                                    helpShow required>
                                        {data.productCategoryName}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.productCategoryStyle',
                                        defaultMessage: '车型年款'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.productCategoryStyle}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.version',
                                        defaultMessage: '版型'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.version}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.mileage',
                                        defaultMessage: '行驶里程'
                                    })} {...FORM_OPTIONS.item}>
                                        <LocalizeInputNumber
                                            name="mileage"
                                            value={data.mileage}
                                            onBlur={this.handleFilterChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.keyCode',
                                        defaultMessage: '钥匙号'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="keyCode"
                                            value={data.keyCode}
                                            onBlur={this.handleFilterChange}/>
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.status',
                                        defaultMessage: '状态'
                                    })} {...FORM_OPTIONS.item}>
                                        {conventEnumValueToString(vehicleStatus, data.status)}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.batchNumber',
                                        defaultMessage: '批次号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.batchNumber}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.productCode',
                                        defaultMessage: '物料号'
                                    })} {...FORM_OPTIONS.item}
                                    helpShow validateStatus={validateProductCode} required>
                                        {data.productCode}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.productName',
                                        defaultMessage: '物料名称'
                                    })} {...FORM_OPTIONS.item}
                                    helpShow validateStatus={validateProductName} required>
                                        {data.productName}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.productGroup',
                                        defaultMessage: '产品组分类'
                                    })} {...FORM_OPTIONS.item}>
                                        {conventEnumValueToString(productGroupType, data.productGroup)}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.certificateNumber',
                                        defaultMessage: '合格证号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.certificateNumber}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.certificateDate',
                                        defaultMessage: '合格证日期'
                                    })} {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.certificateDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.engineCode',
                                        defaultMessage: '发动机号'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="engineCode"
                                            value={data.engineCode}
                                            onBlur={this.handleFilterChange}/>
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.engineModel',
                                        defaultMessage: '发动机型号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.engineModel}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.transmissionSn',
                                        defaultMessage: '变速箱号'
                                    })} {...FORM_OPTIONS.item}>
                                        <TextInput
                                            name="transmissionSn"
                                            value={data.transmissionSn}
                                            onBlur={this.handleFilterChange}/>
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.transmissionModel',
                                        defaultMessage: '变速箱型号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.transmissionModel}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.engineCylinder',
                                        defaultMessage: '排量'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.engineCylinder}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.color',
                                        defaultMessage: '颜色'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.color}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.transmission',
                                        defaultMessage: '手自动'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.transmission}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.lfetOrRight',
                                        defaultMessage: '左右舵'
                                    })} {...FORM_OPTIONS.item}>
                                        {conventEnumValueToString(LfetOrRight, data.lfetOrRight)}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.rolloutDate',
                                        defaultMessage: '下线日期'
                                    })} {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.rolloutDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.inboundDate',
                                        defaultMessage: '入库日期'
                                    })} {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.inboundDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={formatMessage({
                                            id: 'newPanel.form.operationsNature',
                                            defaultMessage: '运营性质'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        <WrappedSelect
                                            allowClear
                                            name="operationsNature"
                                            value={data.operationsNature}
                                            options={vehicleOperactionsNature.toList(language)}
                                            onChange={this.handleFilterChange}/>
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.manufacturerName',
                                        defaultMessage: '生产工厂'
                                    })} {...FORM_OPTIONS.item}
                                    helpShow validateStatus={validateManufacturerName} required>
                                        {data.manufacturerName}</FormItem>
                                </Col>
                            </Row>
                            <Row>
                                <FormItem
                                    label={formatMessage({
                                        id: 'newPanel.form.remark',
                                        defaultMessage: '备注'
                                    })}
                                    {...FORM_ROW_OPTIONS.item}>
                                    <TextInput type="textarea" name="remark" value={data.remark} onBlur={this.handleFilterChange} />
                                </FormItem>
                            </Row>
                        </Form>
                    </Card>
                    <Card title={formatMessage({
                        id: 'newPanel.column.title',
                        defaultMessage: '车辆档案扩展信息'
                    })}>
                        <Form>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.requirementCode',
                                        defaultMessage: '需求编号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.requirementCode}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.bodyNumber',
                                        defaultMessage: '车身编号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.bodyNumber}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.vehicleProperty',
                                        defaultMessage: '车辆属性'
                                    })} {...FORM_OPTIONS.item}>
                                        <WrappedSelect
                                            allowClear
                                            name="vehicleProperty"
                                            value={data.vehicleProperty}
                                            options={vehicleProperty.toList(language)}
                                            onChange={this.handleFilterChange}/>
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.certificateRFID',
                                        defaultMessage: '合格证RFID'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.certificateRFID}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.vehicleRFID',
                                        defaultMessage: '车辆RFID'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.vehicleRFID}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.isBuckup',
                                        defaultMessage: '是否建储车'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.isBuckup ? '是' : '否'}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.exportDestination',
                                        defaultMessage: '出口国家'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.exportDestination}</FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.form.contractCompany',
                                        defaultMessage: '合同单位'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.contractCompany}</FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </Card>
                    <Card className={styles.optionBtn}>
                        <Row>
                            <Col className="col-align-right">
                                <Button
                                    key="audit"
                                    loading={loading}
                                    onClick={this.onSubmit}
                                    disabled={!submitable}
                                    className={styles.btnMargin}
                                    type="primary">
                                    {formatMessage({
                                        id: 'newPanel.btn.submit',
                                        defaultMessage: '提交'
                                    })}
                                </Button>
                            </Col>
                        </Row>
                    </Card>
                </Spin>
                <div className="page-toolbar">
                    <Return
                        disabled={loading}
                        showWarning={hasOperat}
                        onConfirm={onCancel} />
                </div>
            </div>
        );
    }
}

NewPanel.propTypes = {
    initEnumData: PropTypes.object.isRequired,
    permissions: PropTypes.array.isRequired,
    successReturn: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    onUmount: PropTypes.func.isRequired,
    intl: PropTypes.object,
};

import {connect} from 'react-redux';
import {createSelector} from 'reselect';
import {querySearch, clearData, onSubmit} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const getinitEnumData = createSelector(
    state => state.getIn(['page', 'domainData', 'init']),
    init => {
        const initData = init.toJS();
        const brands = initData.brands ? ListTypeCL(initData.brands) : [];
        const partWarehouses = initData.partWarehouses ? ListTypeCL(initData.partWarehouses) : [];
        return {
            brands,
            partWarehouses,
            initData
        };
    }
);

const mapStateToProps = state => ({
    initEnumData: getinitEnumData(state),
    permissions: getPermissions(state)
});
const mapDispatchToProps = (dispatch, props) => ({
    onSubmit: (data, details) => dispatch(onSubmit(data, details)),
    successReturn: () => {
        dispatch(querySearch());
        props.history.push(routes.query.url());
    },
    onCancel: () => {
        props.history.push(routes.query.url());
    },
    onUmount: () => dispatch(clearData()),
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(NewPanel));
